<template>
  <div class="invitation">
    <van-nav-bar title="我的帖子" left-arrow @click-left="$router.history.go(-1)">
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="myInvitation">我发布的帖子</div>
    <div class="contentNav">
    <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
	      <van-list
	        v-model="loading"
	        :finished="finished"
	        @load="onLoad"
	        :immediate-check="false"
          finished-text="没有更多了">
          <div v-for="(item,index) in order" :key='index'>
            <div class="tie" v-if='item.postCategoryId=="MQ=="'   @click='$router.push({path:"invitationContent",query:{postId:item.postId}})'>
              <div class="top mt-30" >
                <img :src="item.userInfo.userPhoto" class="pic l" @click.stop='$router.push({path:"otherUser",query:{userId:item.userInfo.userId}})'/>
                <div class="txt1 l">
                  <div class="title"><div class="name hide_other">{{item.userInfo.userName}}</div><div class="clear"></div></div>
                  <div class="time">{{item.dbCreateTime}}</div>
                </div>
                <img src="../../../public/images/qt_86.png" class="btn_gz r" @click.stop='del(item.postId)'/>
                <div class="clear"></div>
              </div>
              <div class="txt2 hide_otherFour" v-if='item.txtStatus'>{{item.content.slice(0,76)}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=false'>查看更多>></span></div>
              <div class="txt2" v-else>{{item.content}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=true'>收起</span></div>
              <div class="pic">
                <img v-for='(items,indexs) in item.images.slice(0,9)' :key='indexs' :src="items"/>
              </div>
              <div class="bottom mt-30">
                <div class="peopleNum l">868人看到</div>
                <div class="otherNum2 r"><img src="../../../public/images/qt_80.png"/>{{item.thumbUpNum}}</div>
                <div class="otherNum1 r mr-50"><img src="../../../public/images/qt_78.png"/>{{item.commentNum}}</div>
                <div class="clear"></div>
              </div>
            </div>
            <div class="tie goodsdlq" v-else>
              <div class="sureSw" @click='sureSw(item.postId)'>确认领取</div>
              <div class="top mt-30">
                <img :src="item.userInfo.userPhoto" class="pic l" @click.stop='$router.push({path:"otherUser",query:{userId:item.userInfo.userId}})'/>
                <div class="txt1 l">
                  <div class="title"><div class="name hide_other">{{item.userInfo.userName}}</div><div class="clear"></div></div>
                  <div class="time">{{item.dbCreateTime}}</div>
                </div>
                <div class="clear"></div>
              </div>
              <div class="txt2 hide_otherFour" v-if='item.txtStatus'>{{item.content.slice(0,76)}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=false'>查看更多>></span></div>
              <div class="txt2" v-else>{{item.content}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=true'>收起</span></div>
              <p class="goodsMessage hide_other">物品：<span>{{item.name}}</span></p>
              <p class="goodsMessage hide_other">时间：<span>{{item.time}}</span></p>
              <p class="goodsMessage hide_other">地点：<span>{{item.address}}</span></p>
              <p class="goodsMessage hide_other">联系：<span>{{item.tel}}</span></p>
              <div class="pic">
                <img v-for='(items,indexs) in item.images.slice(0,9)' :key='indexs' :src="items"/>
              </div>
              <div class="bottom mt-30">
                <div class="peopleNum l">868人看到</div>
                <div class="clear"></div>
              </div>
            </div>
          </div>
          
          <van-dialog
            v-model="tkShow"
            title="手机号"
            show-cancel-button
            @confirm='tkSure'
            :before-close='closeTk'
          >
            <input type="text" v-model="recipientUserId" placeholder="请输入领取人手机号" class="tkInput"/>
          </van-dialog>
        </van-list>
      </div>
    <!-- </van-pull-refresh> -->
  </div>
</template>

<script>
import storage from '@/common/store'
export default {
  data(){
    return{
      loading: false,
      finished: false,
      isLoading:false,
      sizes:10,
      pages:1,
      order:[],
      userId:storage.getItem('userInfo').userId,
      tkShow:false,
      swId:'',
      recipientUserId:'',
      tkStatus:true,
    }
  },
  created(){
    this.getMessage();
  },
  methods:{
    getMessage(){
      this.pages=1;
      this.$get(this.$api.user.posts,{page:this.pages,size:this.sizes,userId:this.userId}).then(data=>{
        data.data.curPageData.forEach((item,index,array)=>{
          array[index]=JSON.parse(item.content);
          array[index].postId=item.postId;
          array[index].thumbUpNum=item.thumbUpNum;
          array[index].commentNum=item.commentNum;
          array[index].userInfo=item.userInfo;
          array[index].postCategoryId=item.postCategoryId;
          array[index].dbCreateTime=this.ConvertIso(item.dbCreateTime);
          array[index].txtStatus=true;
          array[index].images=JSON.parse(item.images);
        })
        console.log(data.data.curPageData)
        this.order=data.data.curPageData;
        this.pages=2;
      })
    },
    onLoad() {
      setTimeout(() => {
        this.$get(this.$api.user.posts,{page:this.pages,size:this.sizes,userId:this.userId}).then(data=>{
          if((Number(this.pages)-1)*this.sizes<data.data.totalNum){
            data.data.curPageData.forEach((item,index,array)=>{
              array[index]=JSON.parse(item.content);
              array[index].postId=item.postId;
              array[index].thumbUpNum=item.thumbUpNum;
              array[index].commentNum=item.commentNum;
              array[index].userInfo=item.userInfo;
              array[index].postCategoryId=item.postCategoryId;
              array[index].dbCreateTime=this.ConvertIso(item.dbCreateTime);
              array[index].txtStatus=true;
              array[index].images=JSON.parse(item.images);
            })
            for (let i = 0; i < data.data.curPageData.length; i++) {
              this.order.push(data.data.curPageData[i]);
            };
            console.log(this.order);
            this.loading = false;
          }else{
            this.loading = false;
            this.finished  = true;
          }
          this.pages++;
        })
      }, 500);
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
        this.get_message();
      }, 500);
    },
    del(id){
      let that=this;
      this.$dialog.confirm({
        title: '',
        message: '确认删除么？'
      }).then(() => {
        that.$post(that.$api.blog.postsDelete,{postId:id}).then(data=>{
          that.$toast.success({message:'删除成功',duration:500});
          that.getMessage();
        })
      }).catch(() => {
        // on cancel
      });
    },
    sureSw(id){
      this.tkShow=true;
      this.swId=id;
    },
    tkSure(){
      if(!this.recipientUserId){
        this.$toast({message:'请输入领取人手机号',duration:500});
        this.tkStatus=false;
        return;
      };
      let that=this;
      that.$post(that.$api.blog.lostFinish,{postId:this.swId,recipientUserId:this.recipientUserId}).then(data=>{
        that.$toast.success({message:'已完成',duration:500});
        that.getMessage();
        that.tkShow=false;
      });
      that.recipientUserId='';
    },
    closeTk(action, done){
      console.log(action)
      console.log(done)
      if(this.tkStatus){
        done()
      }else{
        done(false);
        this.tkStatus=true;
      }
       
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .myInvitation{height: 1rem;background-color: #fff;font: 0.3rem/1rem '微软雅黑';color: #999999;margin-left: 0.3rem;}
  .tie{padding:0 0.3rem 0.3rem 0.3rem;position: relative;border-top: 0.3rem solid #F5F5F5;}
  .tie .top .pic{display: block;width: 0.8rem;height: 0.8rem;border-radius: 50%;overflow: hidden;}
  .tie .top .txt1{margin-left: 0.25rem;}
  .tie .top .txt1 .title .name{font: 0.32rem/0.35rem '微软雅黑';color: #4AACE9;width: 1.5rem;float: left;height: 0.45rem;}
  .tie .top .txt1 .time{font:0.24rem/0.35rem '微软雅黑';color: #999999;}
  .tie .top .btn_gz{width: 0.27;height: 0.28rem;display: block;margin-top: 0.26rem;}
  .tie .txt2{font: 0.32rem/0.4rem '微软雅黑';color: #333333;margin: 0.3rem 0;}
  .tie .txt2 .more{color: #4AACE9;margin-left: 0.2rem;font: 0.3rem/0.4rem '微软雅黑';}
  .tie .pic img{display: inline-block;width:calc((100% - 0.3rem)/3);margin:0.04rem 0.05rem 0.18rem 0.05rem;}
  .tie .bottom{font: 0.24rem/0.34rem '微软雅黑';color: #AAAAAA;}
  .tie .bottom .otherNum1{float: right;}
  .tie .bottom img{display: inline-block;width: 0.34rem;height: 0.34rem;margin-right: 0.1rem;margin-bottom: 0.05rem;}
  .goodsMessage{font: 0.28rem/0.5rem '微软雅黑';color:#333333;}
  .goodsMessage span{color: #4AACE9;}
  .contentNav{height: calc(100vh - 46px - 1rem);overflow-y: scroll;}

  .sureSw{
    padding: 0 0.22rem;
    height: 0.46rem;
    background-color: rgb(74, 172, 233);
    border-radius: 0 0.23rem 0.23rem;
    line-height: 0.46rem;
    color: #fff;
    position:absolute;
    right: 0.3rem;
    top: 0.47rem;
    font-size: 0.24rem;
  }

  .tkInput{border: none;text-align: left;outline: none;width: 80%;display: block;margin: 0.2rem auto;border:1px solid #F5F5F5;padding:0 0.2rem;height: 0.7rem;line-height: 0.7rem;font-size: 0.24rem;}
</style>
